import React from 'react';

// 这是一个礼物列表的示例，您可以根据需要修改或从服务器获取
// 使用SVG格式的礼物图标
const gifts = [
  { id: 'rose', name: '玫瑰', price: 1, icon: '/assets/gifts/rose.svg' },
  { id: 'diamond', name: '钻石', price: 10, icon: '/assets/gifts/diamond.svg' },
  { id: 'crown', name: '皇冠', price: 100, icon: '/assets/gifts/crown.svg' },
  { id: 'rocket', name: '火箭', price: 1000, icon: '/assets/gifts/rocket.svg' },
];

const giftPanelStyle = {
  position: 'fixed',
  bottom: 0,
  left: 0,
  right: 0,
  backgroundColor: 'rgba(0, 0, 0, 0.85)',
  backdropFilter: 'blur(5px)',
  borderTopLeftRadius: '20px',
  borderTopRightRadius: '20px',
  padding: '20px',
  transform: 'translateY(100%)',
  transition: 'transform 0.3s ease-in-out',
  zIndex: 1001,
  color: '#fff',
};

const giftPanelVisibleStyle = {
  transform: 'translateY(0)',
};

const giftGridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(4, 1fr)',
  gap: '15px',
  textAlign: 'center',
};

const giftItemStyle = {
  cursor: 'pointer',
  padding: '10px',
  borderRadius: '8px',
  transition: 'background-color 0.2s',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: '5px',
};

const giftIconStyle = {
  width: '50px',
  height: '50px',
};

const GiftComponent = ({ visible, onClose, onSendGift }) => {

  const handleSend = (gift) => {
    // 在实际应用中，您可以在这里处理扣除金币的逻辑
    console.log(`发送礼物: ${gift.name}`);
    onSendGift(gift);
  };

  // 点击背景时关闭面板
  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div style={{ ...giftPanelStyle, ...(visible && giftPanelVisibleStyle) }} onClick={handleOverlayClick}>
      <div onClick={e => e.stopPropagation()}>
        <div style={{ 
          paddingBottom: '10px', 
          borderBottom: '1px solid #444', 
          marginBottom: '15px', 
          fontSize: '18px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <span>赠送礼物</span>
          <button 
            onClick={onClose} 
            style={{
              background: 'transparent',
              border: 'none',
              color: '#aaa',
              fontSize: '20px',
              cursor: 'pointer',
              padding: '0 8px',
              lineHeight: '1'
            }}
          >
            ×
          </button>
        </div>
        <div style={giftGridStyle}>
          {gifts.map(gift => (
            <div
              key={gift.id}
              style={giftItemStyle}
              onClick={() => handleSend(gift)}
              onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'}
              onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              <img src={gift.icon} alt={gift.name} style={giftIconStyle} />
              <div>{gift.name}</div>
              <div style={{ fontSize: '12px', color: '#ffd700' }}>{gift.price} 金币</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: '15px', textAlign: 'center' }}>
          <button 
            onClick={onClose} 
            style={{
              background: 'rgba(255, 255, 255, 0.2)',
              border: 'none',
              borderRadius: '4px',
              color: 'white',
              padding: '8px 16px',
              cursor: 'pointer'
            }}
          >
            完成送礼
          </button>
        </div>
      </div>
    </div>
  );
};

export default GiftComponent; 